<template>
  <div class="container">
    <keep-alive include="homeIndex">
        <router-view></router-view>
    </keep-alive>
    <router-view name="footer"></router-view>
    <div class="tip">请将屏幕竖向浏览</div>
  </div>
</template>

<style lang="stylus" >
*
 padding 0
 margin 0
 list-style none
@font-face {
  font-family: "iconfont"; /* Project id 2868762 */
  src: url('https://at.alicdn.com/t/font_2868762_js7w0pitg4.woff2?t=1634213031806') format('woff2'),
       url('https://at.alicdn.com/t/font_2868762_js7w0pitg4.woff?t=1634213031806') format('woff'),
       url('https://at.alicdn.com/t/font_2868762_js7w0pitg4.ttf?t=1634213031806') format('truetype');
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-fenlei:before {
  content: "\e71b";
}

.icon-weibiaoti--:before {
  content: "\e606";
}

.icon-gouwuche:before {
  content: "\e613";
}

.icon-gerenzhongxin-wodexinxi:before {
  content: "\e62d";
}
html
 font-size 26.666667vw // iphone6
@media all and (min-width: 996px)
  html
    font-size 100px

body
  font-size 14px
html,body,.container
  height 100%
.container
  max-width 996px
  margin 0 auto
  overflow hidden
  display flex
  flex-direction column
  // background-color red
  .box
    flex 1
    overflow auto
    display flex
    flex-direction column
    .header
      height 0.44rem
      background-color #FD6989
    .content
      flex 1
      overflow auto
  .footer
    height 0.5rem
    background-color #efefef
    ul
      width 100%
      height 100%
      display flex
      li
        flex 1
        height 100%
        display flex
        flex-direction column
        justify-content center
        align-items center

        &.router-link-active
          color #f66

        span
          font-size 0.24rem
        p
          font-size 12px
.tip
  position fixed
  top 0px
  left 0px
  right 0px
  bottom 0px
  background-color rgba(0, 0, 0, 0.6)
  color #fff
  display none
  justify-content center
  align-items center

// 如何判断是横屏还是竖屏  ---  媒体查询
@media all and (orientation : landscape)
  .tip
    display flex

</style>
